<script setup lang="ts">
import { computed, defineAsyncComponent, ref } from "vue";
import { SvgIcon, HoverButton } from "@/components/common";
import { useBasicLayout } from "@/hooks/useBasicLayout";
const { isMobile } = useBasicLayout();
import { NAvatar, NTooltip } from "naive-ui";
import { homeStore } from "@/store";

const st = ref({ show: false, showImg: false, menu: [], active: "chat" });

import { router } from "@/router";

const goHome = computed(() => {
  //router.push('/')
  return router.currentRoute.value.name;
});
//mlog('g', goHome() );
</script>
<template>
  <div class="flex-shrink-0 w-[60px] z-[1000] h-full" v-if="!isMobile">
    <div
      class="flex h-full select-none flex-col items-center justify-between bg-[#e8eaf1] px-2 pt-4 pb-8 dark:bg-[#25272d]"
    >
      <div class="flex flex-col space-y-4 flex-1">
        <a
          href="#/draw"
          @click="st.active = 'draw'"
          class="router-link-exact-active h-12 w-12 cursor-pointer rounded-xl bg-white duration-300 dark:bg-[#34373c] hover:bg-[#bbb] dark:hover:bg-[#555]"
        >
          <n-tooltip placement="right" trigger="hover">
            <template #trigger>
              <div
                class="flex h-full justify-center items-center py-1 flex-col"
                :class="[goHome == 'draw' ? 'active' : '']"
              >
                <SvgIcon
                  icon="ic:outline-palette"
                  class="text-3xl flex-1"
                ></SvgIcon>
                <span class="text-[10px]">视频制作</span>
              </div>
            </template>
            文生视频
          </n-tooltip>
        </a>
      </div>
    </div>
  </div>
  <Setting v-if="st.show" v-model:visible="st.show" />
</template>

 